<template>
  <div class="go-items-list">
    <div class="list-header">
      <n-breadcrumb>
        <n-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" @click="breadcrumbClick(item)">{{
          item.name
        }}</n-breadcrumb-item>
      </n-breadcrumb>
      <n-button ghost type="primary" @click="openModel()"> 新建页面 </n-button>
    </div>
    <n-grid v-if="list.length" :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
      <n-grid-item v-for="(item, index) in list" :key="item.id">
        <project-items-card
          :cardData="item"
          :projectInfo="projectInfo"
          @resize="resizeHandle"
          @delete="deleteHandle($event, index)"
          @edit="editHandle"
          @update="editPageHandle"
        ></project-items-card>
      </n-grid-item>
    </n-grid>
    <img v-else src="@/assets/images/exception/nodata.svg" alt="" />
  </div>
  <project-items-modal-card
    v-if="modalData"
    :modalShow="modalShow"
    :cardData="modalData"
    @close="closeModal"
    @edit="editHandle"
  ></project-items-modal-card>
  <create-modal
    :show="showModel"
    type-name="页面"
    :cardData="activeCardData"
    @close="closeModel"
    @submit="createHandle"
  ></create-modal>
</template>

<script setup lang="ts">
import { ProjectItemsCard } from '../ProjectItemsCard/index'
import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'
import { icon } from '@/plugins'
import { useDataListInit } from './hooks/useData.hook'
import { useModalDataInit } from './hooks/useModal.hook'
import { CreateModal } from '../../../list/components/CreateModal'
import { fetchPathByName, routerTurnByPath } from '@/utils'

const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
const {
  list,
  breadcrumbList,
  showModel,
  activeCardData,
  projectInfo,
  openModel,
  getDataList,
  deleteHandle,
  createHandle,
  editPageHandle
} = useDataListInit()
const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()

getDataList()

const closeModel = () => {
  showModel.value = false
}

const breadcrumbClick = (item: any) => {
  const path = fetchPathByName(item.pathName, 'fullPath')
  routerTurnByPath(path, undefined, true, false)
}
</script>

<style lang="scss" scoped>
$contentHeight: 250px;
@include go('items-list') {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - #{$--header-height} * 2 - 2px);
  .list-header {
    display: flex;
    justify-content: space-between;
  }
  .list-content {
    position: relative;
    height: $contentHeight;
  }
  img {
    display: block;
    margin: 200px auto 0;
    width: 500px;
  }
}
</style>
